<template>
  <div class="details-container flex both-100">
    <div class="img-wrapper content-wrapper flex">
      <div class="content-item alarm-plane">
        <custom-title title="报警图"></custom-title>
        <div class="img-container alarm-pics">
          <template v-if="descModel.alarmPics">
            <el-image :preview-src-list="descModel.alarmPics.map(item => inFilePrefix + item)" :src="inFilePrefix + descModel.alarmPics[0]" class="image" fit="fill" lazy></el-image>
          </template>
          <div class="img-contaienr__footer"></div>
        </div>
      </div>
      <div class="content-item alarm-video">
        <custom-title title="报警录像"></custom-title>
        <div class="img-container alarm-plane" style="height:300px;">
          <template v-if="descModel['picUrl']">
            <!-- <el-image :src="videoImg" class="image" fit="fill" lazy></el-image> -->
            <!-- <img src="@/assets/images/video.png" class="image" fit="fill" lazy /> -->
          </template>
          <div class="img-contaienr__footer"></div>
        </div>
      </div>
    </div>
    <div class="info-wrapper content-wrapper flex">
      <div class="content-item alarm-info">
        <custom-title title="报警信息"></custom-title>
        <div class="content-item__body">
          <el-skeleton :rows="6" :loading="descLoading" :throttle="100">
            <base-descriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="descModel">
              <template slot="alaramLv" slot-scope="slotProps">
                <div class="span">
                  {{ descModel[slotProps.scope.fieIdName] }}
                  <span class="urency-tag" :class="formatUrgency(descModel.alarmUrgency)"></span>
                </div>
              </template>
              <template slot="picUrl" slot-scope="slotProps">
                <span v-if="descModel[slotProps.scope.fieIdName]" @click="showPic"><img style="width: 50px;height:50px;cursor: pointer;" :src="inFilePrefix + descModel[slotProps.scope.fieIdName]"></span>
                <div v-else class="flex-bcenter both-100" style="width: 100px;height:83px;">
                  <EmptyData description="暂无图片" />
                </div>
              </template>
            </base-descriptions>
          </el-skeleton>
          <!-- <base-table :tableModel="reasonDeviceList" :tableItemConfig="reasonDeviceListConfig" stripe v-loading="reasonDeviceListLoading"/> -->
        </div>
      </div>
      <div class="content-item alarm-elevance">
        <custom-title title="报警原因"></custom-title>
        <div class="content-item__body">
          <custom-form :formModel="alarmReasonModel" :formItemConfig="alarmReasonModelConfig" />
          <div class="btn-wrapper">
            <el-button class="btn_primary" @click="clickRepace" v-if="alarmReasonModel.alarmStatus !== '5'">保存</el-button>
            <el-button class="btn_ghost__primary" @click="clickRepace" v-else>确认处理</el-button>
          </div>
        </div>
      </div>
    </div>


    <!-- 弹窗 报警平面图 -->
    <el-dialog title="报警平面图" class="large_dialog" :visible.sync="dialogVisible" append-to-body>
      <div v-if="picUrl" class="content-pic"><img class="pic" :src="inFilePrefix + picUrl" alt=""></div>
      <div v-else class="flex-bcenter both-100" >
        <EmptyData description="暂无图片" />
      </div>
    </el-dialog>
    <!-- 弹窗 报警平面图 over -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getDeviceData } from '@/api/system/device/management';
import { getProjectPointPic } from '@/api/index'

import { getAlarmDetail, getProjectPointControl, getReasonDevice, getDicts, updateAlarm } from '@/api'
import { formatUrgency } from '@/utils/filters'
export default {
  name: 'alarmDetails',
  props: {
    value: {
      type: Object,
      require: true
    },
  },
  data() {
    return {
      dialogVisible: false,
      // 描述配置
      descConfig: {
        size: 'medium',
        column: '2',
      },
      // 详情页数据
      descModel: {},
      // 详情页配置项
      descConfigItem: [
        {
          fieIdName: 'projectPointName',
          label: '项目点位',
          span: '3',
          slotName: 'alaramLv'
        },
        {
          fieIdName: 'deviceName',
          label: '设备名称',
          span: '3'
        },
        // {
        //   fieIdName: 'projectAddress',
        //   label: '平面图',
        //   span: '3'
        // },
        {
          fieIdName: 'picUrl',
          label: '报警平面图',
          span: '3',
          slotName: "picUrl"
        },
        {
          fieIdName: 'projectDirector',
          label: '联系人',
          span: '2'
        },
        {
          fieIdName: 'directorPhone',
          label: '联系电话',
          span: '2'
        },
        {
          fieIdName: 'happenTime',
          label: '报警时间',
          span: '3'
        },
        {
          fieIdName: 'handleTime"',
          label: '处理时间',
          span: '2'
        },
        {
          filIdName: 'handleUserName',
          label: '处理人',
          span: '2'
        },
        {
          fieIdName: 'installPosition',
          label: '报警位置',
          span: '2'
        },
        {
          fieIdName: 'alarmReason',
          label: '报警原因',
          span: '2'
        },
        {
          fieIdName: 'alarmValueText',
          label: '报警值',
          span: '2'
        },
      ],
      // 报警详情
      alarmDetail: {},
      // 详情加载状态
      descLoading: false,
      // 关联设备搜索条件
      searchDeviceMap: {
        associationStatus: 1,
        deviceId: undefined,
        deviceTypeId: undefined
      },
      // 报警关联设备
      reasonDeviceList: [],
      // 报警关联设备表格配置
      reasonDeviceListConfig: [
        {
          prop: 'createTime',
          label: '报警时间'
        },
        {
          prop: 'deviceClassifyId',
          label: '设备编号'
        },
        {
          prop: 'installPosition',
          label: '报警位置'
        },
        {
          prop: 'remark',
          label: '报警内容'
        }
      ],
      // 报警关联设备加载状态
      reasonDeviceListLoading: false,
      //
      alarmReasonModel: {
        alarmId: '',
        alarmStatus: 0,
        alarmType: 0,
        handleAlarmReason: [],
        handleContent: 'undefined'
      },
      //
      alarmReasonModelConfig: [
        {
          label: '报警原因',
          prop: 'handleAlarmReason',
          component: 'BaseCheckboxGroup',
          isButton: 'true',
          options: [],
          span: 24,
        },
        {
          label: '备注信息',
          prop: 'handleContent',
          span: 24,
          type: 'textarea'
        },
        {
          label: '报警分类',
          prop: 'alarmType',
          component: 'BaseRadioGroup',
          isButton: 'true',
          options: [],
          span: 24,
        },
        {
          label: '处理结果',
          prop: 'alarmStatus',
          component: 'BaseRadioGroup',
          span: 24,
          clearable: true,
          width: '100%',
          isButton: 'true',
          options: [],
          placeholder: '请输入用户名',
        },
      ],
      picUrl: ''
    }
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {
    value: {
      handler(details) {
        // console.log('details', this.value)
        this.getDetails(details.alarmId)
        this.getOption()
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    // 初始化数据
    /**
     *  @param {string} alarmId - 报警的唯一标识ID。
     */
    async getDetails(id) {
      this.descLoading = true
      // 设备详情
      const deviceInfo = await getDeviceData(this.value.deviceId)
      // 告警详情
      const alarmDetail = await getAlarmDetail(id)

      // 设备关联的 报警平面图 
      let projectPointPicId = deviceInfo.data?.projectPointPicId
      if (projectPointPicId) {
        let res = await getProjectPointPic(projectPointPicId)
        if (res && 200 == res.code) {
          this.picUrl = res.data.picUrl
        }
      }

      let alarmData = alarmDetail.data || {}
      alarmData.installPosition = deviceInfo.data?.installPosition
      alarmData.deviceName = this.value.deviceName
      if (alarmData.alarmValue && alarmData.alarmValue.value) {
        alarmData.alarmValueText = alarmData.alarmValue.value
      }
      const pointDetail = await getProjectPointControl(alarmData.projectPointId)
      const { alarmId, alarmStatus, alarmType, handleAlarmReason, handleContent } = alarmData;
      this.alarmReasonModel = {
        alarmId,
        alarmStatus,
        alarmType,
        handleAlarmReason: Array.isArray(handleAlarmReason) ? handleAlarmReason : [],
        handleContent
      }
      this.alarmDetail = alarmData
      // this.listAssociaTionDevice()
      this.generateDesModel(alarmData, pointDetail)
    },
    /**
     * @param {Object} alarmDetail - 报警的详细信息。
     * @param {Object} pointDetail - 项目点的详细控制信息。
     */
    generateDesModel(alarmDetail, pointDetail) {
      const mergeDetail = Object.assign({}, alarmDetail, pointDetail.data)
      this.descLoading = false
      this.descModel = mergeDetail
      this.$set(this.descModel, 'picUrl', this.picUrl)
      // console.log("descModel:", this.descModel)
    },
    /**查询关联设备 */
    listAssociaTionDevice() {
      this.searchDeviceMap.deviceId = this.alarmDetail.deviceId
      this.searchDeviceMap.deviceTypeId = this.alarmDetail.deviceTypeId
      this.reasonDeviceListLoading = true
      getReasonDevice(this.searchDeviceMap).then(res => {
        if (200 === res.code) {
          this.reasonDeviceList = res.rows
          this.reasonDeviceListLoading = false
        }
      })
    },
    /**根据紧急度渲染图片 */
    formatUrgency(urgency) {
      return formatUrgency(urgency)
    },
    /**查询单选框数据 */
    async getOption() {
      const alarmReasonType = await getDicts('alarm_reason_type')
      const alarmType = await getDicts('alarm_type')
      const handleAlarmReasonType = await getDicts('handle_alarm_reason')
      this.initOption(alarmReasonType.data, 'reason')
      this.initOption(alarmType.data, 'alarm')
      this.initOption(handleAlarmReasonType.data, 'handleReason')
    },
    /**初始化单选框 */
    initOption(data, type) {
      if (type === 'reason') {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'alarmType') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      } else if (type === 'alarm') {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'alarmStatus') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      } else {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'handleAlarmReason') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      }
    },
    /**点击重新处理 */
    clickRepace() {
      updateAlarm(this.alarmReasonModel).then(res => {
        if (200 === res.code) {
          this.$message.success('处理成功')
          this.$emit('repace')
        }
      })
    },
    showPic() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang='less' scoped>
.details-container {
  .content-wrapper {
    flex-direction: column;

    .content-item {
      height: 350px;

      .content-item__body {
        height: calc(100% - 55px);
        overflow: auto;
      }
    }
  }

  .img-wrapper {
    width: 440px;
    height: 100%;
    margin-right: 40px;
  }

  .info-wrapper {
    flex: 1;
    height: 100%;

    .content-item__body {
      padding: 0 15px;
    }

    .alarm-elevance {
      box-sizing: content-box;

      /deep/.el-radio-group {
        line-height: 32px;
      }

      .btn-wrapper {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.des_container[data-v-18dc1086] {
  height: auto;
}

.content-pic {
  height: 100%;

  .pic {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.alarm-pics {
  display: block;
  height: 300px;


  .content {
    height: 100%;
    overflow: auto;
  }
}
</style>